<template>
  <div class="verify-management">
    <div class="verify-header">
      <h3>数据验证</h3>
    </div>

    <!-- 验证表单 -->
    <el-form :model="verifyForm" :rules="rules" ref="verifyForm" label-width="100px" class="verify-form">
      <el-form-item label="验证类型" prop="verify_type">
        <el-select v-model="verifyForm.verify_type" placeholder="请选择验证类型">
          <el-option label="批次信息" value="batch"></el-option>
          <el-option label="质检记录" value="quality"></el-option>
          <el-option label="物流记录" value="logistics"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="数据ID" prop="data_id">
        <el-input v-model="verifyForm.data_id" placeholder="请输入数据ID"></el-input>
      </el-form-item>
      <el-form-item label="数据内容" prop="data_content">
        <el-input type="textarea" v-model="verifyForm.data_content" rows="4" placeholder="请输入需要验证的数据内容"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="verifyData" :loading="verifying">验证数据</el-button>
      </el-form-item>
    </el-form>

    <!-- 验证结果 -->
    <div v-if="verifyResult" class="verify-result">
      <h4>验证结果</h4>
      <el-card :class="verifyResult.valid ? 'valid' : 'invalid'">
        <div class="result-header">
          <i :class="verifyResult.valid ? 'el-icon-success' : 'el-icon-error'"></i>
          <span>{{ verifyResult.valid ? '数据验证通过' : '数据验证失败' }}</span>
        </div>
        <div class="result-content">
          <p><strong>数据哈希：</strong>{{ verifyResult.data_hash }}</p>
          <p><strong>区块哈希：</strong>{{ verifyResult.block_hash }}</p>
          <p><strong>存证时间：</strong>{{ formatTime(verifyResult.timestamp) }}</p>
          <p v-if="!verifyResult.valid"><strong>失败原因：</strong>{{ verifyResult.error }}</p>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'VerifyManagement',
  data() {
    return {
      verifyForm: {
        verify_type: '',
        data_id: '',
        data_content: ''
      },
      rules: {
        verify_type: [
          { required: true, message: '请选择验证类型', trigger: 'change' }
        ],
        data_id: [
          { required: true, message: '请输入数据ID', trigger: 'blur' }
        ],
        data_content: [
          { required: true, message: '请输入数据内容', trigger: 'blur' }
        ]
      },
      verifying: false,
      verifyResult: null
    }
  },
  methods: {
    async verifyData() {
      try {
        await this.$refs.verifyForm.validate()
        this.verifying = true
        
        // 尝试将输入的数据内容转换为JSON
        let contentData
        try {
          contentData = JSON.parse(this.verifyForm.data_content)
        } catch (e) {
          this.$message.warning('请确保输入的数据内容是有效的JSON格式')
          this.verifying = false
          return
        }
        
        const response = await axios.post('/api/blockchain/verify', {
          verify_type: this.verifyForm.verify_type,
          data_id: this.verifyForm.data_id,
          data_content: contentData
        })
        
        this.verifyResult = response.data
        
        if (this.verifyResult.valid) {
          this.$message.success('数据验证通过')
        } else {
          this.$message.warning('数据验证失败')
        }
      } catch (error) {
        this.$message.error('数据验证失败')
        console.error('数据验证失败:', error)
        this.verifyResult = {
          valid: false,
          error: (error.response && error.response.data && error.response.data.error) || '验证过程发生错误'
        }
      } finally {
        this.verifying = false
      }
    },
    formatTime(timestamp) {
      if (!timestamp) return '';
      const date = new Date(timestamp);
      return date.toLocaleString();
    }
  }
}
</script>

<style scoped>
.verify-management {
  padding: 20px;
}
.verify-header {
  margin-bottom: 20px;
}
.verify-header h3 {
  margin: 0;
}
.verify-form {
  max-width: 600px;
  margin-bottom: 30px;
}
.verify-result {
  margin-top: 30px;
}
.verify-result h4 {
  margin-bottom: 15px;
}
.result-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.result-header i {
  font-size: 24px;
  margin-right: 10px;
}
.valid .result-header {
  color: #67C23A;
}
.invalid .result-header {
  color: #F56C6C;
}
.result-content {
  line-height: 1.8;
}
.result-content p {
  margin: 5px 0;
}
</style> 